<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM4-操作元素的属性</title>
    <style>
        #lunbo{
           display: flex;
           justify-content: center;
        }
    </style>
</head>
<body>
    <div id="lunbo">
        <img name="图片" src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89">
    </div>

    <!-- 轮播图按钮 -->
    <script>
        let imgs = ["http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89",
        "http://p1.music.126.net/c27byhx3KVvCle1zykmH_A==/109951165421216056.jpg?imageView&quality=89",
        "http://p1.music.126.net/uU3uL1XvXk7UieISRivS2g==/109951165421640213.jpg?imageView&quality=89",
        "http://p1.music.126.net/Mot-Vbz3JxqI2zbLzye0lQ==/109951165421632886.jpg?imageView&quality=89",
        "http://p1.music.126.net/KLyKvFgCMO68juLWVCgD4A==/109951165421399234.jpg?imageView&quality=89"]

        let img = document.querySelector("img")
        console.log(img.src);   //获取标签的属性，因为src是图片标签自带属性，直接点
        // setAttribute()方法，设置元素的属性，该方法需要传2个参数，分别是属性名和属性值
        img.setAttribute('name','hello')
        console.log(img.getAttribute('name'));  //获取元素的属性，该方法只需要传1个参数，是属性名。
        let i = 0
        setInterval(() => {
            if(++i>=imgs.length) i=0
            //操作标签自带的属性，直接点
            img.src = imgs[i]
        }, 3000);
    </script>
</body>
</html>